待辦清單專案 (新增 / 刪除 / 儲存待辦)

1. HTML 結構

<h1>待辦清單</h1>
<input type="text" id="task" placeholder="輸入待辦事項">
<button id="add">新增</button>

<ul id="list"></ul>

2. JavaScript 程式碼

const input = document.getElementById("task");
const addBtn = document.getElementById("add");
const list = document.getElementById("list");

// 初始化：從 LocalStorage 載入資料
let todos = JSON.parse(localStorage.getItem("todos")) || [];

// 渲染清單
function render() {
  list.innerHTML = ""; // 先清空，避免重複顯示
  todos.forEach((todo, index) => {
    const li = document.createElement("li");
    li.textContent = todo;

    // 建立刪除按鈕
    const delBtn = document.createElement("button");
    delBtn.textContent = "刪除";
    delBtn.style.marginLeft = "10px";

    delBtn.addEventListener("click", () => {
      todos.splice(index, 1); // 從陣列刪除
      localStorage.setItem("todos", JSON.stringify(todos)); // 更新 LocalStorage
      render(); // 重新渲染清單
    });

    li.appendChild(delBtn);
    list.appendChild(li);
  });
}

// 新增任務
addBtn.addEventListener("click", () => {
  const task = input.value.trim();
  if (task) {
    todos.push(task); // 加入陣列
    localStorage.setItem("todos", JSON.stringify(todos)); // 存進 LocalStorage
    input.value = ""; // 清空輸入框
    render(); // 重新渲染
  }
});

// 按 Enter 也能新增
input.addEventListener("keypress", (e) => {
  if (e.key === "Enter") {
    addBtn.click();
  }
});

// 第一次載入頁面時，顯示 LocalStorage 的資料
render();

3. 重點程式碼解釋
   (1) LocalStorage 初始化
   let todos = JSON.parse(localStorage.getItem("todos")) || [];
   localStorage.getItem("todos")：取出之前儲存的資料。
   JSON.parse(...)：把字串轉回陣列。

|| []：如果沒有資料，就用空陣列，避免報錯。

👉 這行程式碼確保「第一次進入頁面」也能正常執行。

(2) 渲染清單 function

function render() {
  list.innerHTML = ""; 
  todos.forEach((todo, index) => {
    ...
  });
}

list.innerHTML = ""：每次重繪前清空，避免舊資料疊加。
forEach：迭代陣列，把每個任務轉成 元素。
index：方便刪除時知道是哪個任務。

(3) 刪除功能

todos.splice(index, 1); 
localStorage.setItem("todos", JSON.stringify(todos));
render();

splice(index, 1)：刪掉陣列中的第 index 項。
更新 LocalStorage，確保資料和畫面一致。
render()：重新繪製畫面，反映最新狀態。

(4) 新增功能

todos.push(task); 
localStorage.setItem("todos", JSON.stringify(todos));
input.value = "";
render();

push：把新任務加進陣列。
JSON.stringify(todos)：轉成字串存進 LocalStorage。
render()：重新渲染畫面。

(5) Enter 快捷輸入

input.addEventListener("keypress", (e) => {
  if (e.key === "Enter") {
    addBtn.click();
  }
});

監聽鍵盤事件。
如果使用者按下 Enter，就觸發新增任務。
讓操作更直覺，不必點按鈕。
小練習
做一個簡單的待辦清單，把任務存進 LocalStorage